import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Table, Switch, Popover, Icon } from 'antd';
import _ from 'lodash';
import './index.less';

const prefixCls = 'site-attribute-table';

const ATTRTYPEMAP = {
  string: '填空',
  single: '单选',
  multiple: '多选'
};
class SiteAttributeTable extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { data, loading, pagination, onEdit, onDelete, onChangeStatus } = this.props;
    const columns = [
      {
        title: '属性名称',
        dataIndex: 'name',
        width: '40%'
      },
      {
        title: '类型',
        dataIndex: 'type',
        width: '25%',
        render: item => ATTRTYPEMAP[item]
      },
      {
        title: (
          <div>
            使用状态
            <Popover
              overlayStyle={{ width: 270 }}
              content="关闭开关，即禁用该属性后：将不支持在资产列表对该字段进行编辑、展示"
            >
              <Icon type="info-circle" style={{ marginLeft: 4, color: '#999EA8' }} />
            </Popover>
          </div>
        ),
        key: 'status',
        render: row => {
          const status = _.get(row, 'status');
          return <Switch checked={status} onClick={() => onChangeStatus(row)} />;
        }
      },
      {
        title: '操作',
        key: 'operations',
        width: '12%',
        render: row => {
          const operations = (
            <div className={`${prefixCls}-operate`}>
              <span className={`${prefixCls}-edit`} onClick={() => onEdit(row)}>
                编辑
              </span>
              <span className={`${prefixCls}-delete`} onClick={() => onDelete(row)}>
                删除
              </span>
            </div>
          );
          return operations;
        }
      }
    ];
    return (
      <Table
        className={prefixCls}
        columns={columns}
        loading={loading}
        dataSource={data}
        pagination={pagination}
      />
    );
  }
}

SiteAttributeTable.propTypes = {
  data: PropTypes.array,
  loading: PropTypes.bool,
  pagination: PropTypes.object,
  onEdit: PropTypes.func,
  onDelete: PropTypes.func,
  onChangeStatus: PropTypes.func
};

export default SiteAttributeTable;
